<!-- CEditor.vue -->
<template>
  <div class="code-editor-container">
    <!-- 编辑器工具栏 -->
    <div class="editor-toolbar">
      <div class="toolbar-left">
        <span>提示:</span>
        <code>Ctrl+1</code><span>插入基础模板</span>
        <span>输入任意C语言关键词自动提示</span>
      </div>
      <div class="toolbar-right">
        <!-- 字体大小选择 -->
        <div class="font-size-control">
          <span>字体大小:</span>
          <el-select 
            v-model="fontSize" 
            size="small" 
            style="width: 80px; margin-left: 8px;"
            @change="handleFontSizeChange"
          >
            <el-option
              v-for="size in fontSizeOptions"
              :key="size"
              :label="size + 'px'"
              :value="size"
            />
          </el-select>
        </div>
      </div>
    </div>
    
    <!-- 可拖拽调整高度的编辑器区域 -->
    <div 
      class="editor-resizable-container"
      :style="{ height: editorHeight + 'px' }"
    >
      <div 
        ref="editorContainer" 
        class="editor-container"
      ></div>
      
      <!-- 拖拽手柄 -->
      <div 
        class="resize-handle"
        @mousedown="startResize"
      >
        <div class="handle-line"></div>
      </div>
      
      <!-- 错误面板 -->
      <div v-if="showErrorPanel" ref="errorPanel" class="error-panel-container"></div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as monaco from 'monaco-editor'

export default {
  name: 'CEditor',

  props: {
    // 代码模板
    codeTemplate: {
      type: String,
      default: `#include <stdio.h>
#include <stdlib.h>
int main() {
    printf("Hello, World!\\n");
    return 0;
}`
    },
    // 是否显示错误面板
    showErrorPanel: {
      type: Boolean,
      default: true
    },
    // 编辑器初始高度
    height: {
      type: String,
      default: '400px'
    },
    // 最小高度
    minHeight: {
      type: Number,
      default: 200
    },
    // 最大高度
    maxHeight: {
      type: Number,
      default: 800
    }
  },

  setup(props, { emit }) {
    const editorContainer = ref(null)
    const errorPanel = ref(null)
    let editor = null

    // 字体大小相关
    const fontSize = ref(14)
    const fontSizeOptions = [12, 13, 14, 15, 16, 18, 20, 22, 24]

    // 编辑器高度相关
    const editorHeight = ref(parseInt(props.height) || 400)
    const isResizing = ref(false)
    const startY = ref(0)
    const startHeight = ref(0)

    // 基础C语言模板
    const codeTemplates = {
      basicStructure: `#include <stdio.h>
int main() {
    printf("Hello\\n");
    return 0;
}`
    }

    // C语言关键字和基础补全
    const cKeywords = [
      // 数据类型
      { label: 'int', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'int' },
      { label: 'char', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'char' },
      { label: 'float', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'float' },
      { label: 'double', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'double' },
      { label: 'void', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'void' },
      { label: 'short', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'short' },
      { label: 'long', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'long' },
      { label: 'signed', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'signed' },
      { label: 'unsigned', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'unsigned' },
      
      // 控制流关键字
      { label: 'if', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'if' },
      { label: 'else', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'else' },
      { label: 'for', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'for' },
      { label: 'while', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'while' },
      { label: 'do', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'do' },
      { label: 'switch', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'switch' },
      { label: 'case', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'case' },
      { label: 'default', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'default' },
      { label: 'break', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'break' },
      { label: 'continue', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'continue' },
      { label: 'return', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'return' },
      { label: 'goto', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'goto' },
      
      // 存储类说明符
      { label: 'auto', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'auto' },
      { label: 'register', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'register' },
      { label: 'static', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'static' },
      { label: 'extern', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'extern' },
      { label: 'const', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'const' },
      { label: 'volatile', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'volatile' },
      
      // 结构相关
      { label: 'struct', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'struct' },
      { label: 'union', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'union' },
      { label: 'enum', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'enum' },
      { label: 'typedef', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'typedef' },
      { label: 'sizeof', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'sizeof' }
    ]

    // 详细的代码片段库 - 增强版
    const codeSnippets = {
      // ... 保持原有的代码片段不变
      printf: [
        // ... 原有的printf片段
      ],
      scanf: [
        // ... 原有的scanf片段
      ],
      control: [
        // ... 原有的控制结构片段
      ],
      function: [
        // ... 原有的函数片段
      ],
      struct: [
        // ... 原有的结构体片段
      ],
      include: [
        // ... 原有的include片段
      ],
      variables: [
        // ... 原有的变量声明片段
      ]
    }

    // 处理字体大小变化
    const handleFontSizeChange = (newSize) => {
      if (editor) {
        editor.updateOptions({
          fontSize: newSize
        })
      }
    }

    // 开始调整大小
    const startResize = (e) => {
      isResizing.value = true
      startY.value = e.clientY
      startHeight.value = editorHeight.value
      
      document.addEventListener('mousemove', handleResize)
      document.addEventListener('mouseup', stopResize)
      
      // 防止文本选择
      e.preventDefault()
    }

    // 处理调整大小
    const handleResize = (e) => {
      if (!isResizing.value) return
      
      const deltaY = e.clientY - startY.value
      let newHeight = startHeight.value + deltaY
      
      // 限制在最小和最大高度之间
      newHeight = Math.max(props.minHeight, Math.min(props.maxHeight, newHeight))
      
      editorHeight.value = newHeight
      
      // 通知父组件高度变化
      emit('height-change', newHeight)
    }

    // 停止调整大小
    const stopResize = () => {
      isResizing.value = false
      document.removeEventListener('mousemove', handleResize)
      document.removeEventListener('mouseup', stopResize)
    }

    // 检查是否在字符串内
    const isInString = (line, index) => {
      let inString = false
      let escape = false
      
      for (let i = 0; i < index; i++) {
        const char = line[i]
        
        if (escape) {
          escape = false
          continue
        }
        
        if (char === '\\') {
          escape = true
        } else if (char === '"' || char === "'") {
          inString = !inString
        }
      }
      
      return inString
    }

    // 模拟编译检查
    const simulateCompilation = (code) => {
      const errors = []
      const lines = code.split('\n')
      
      lines.forEach((line, index) => {
        const lineNumber = index + 1
        const trimmedLine = line.trim()

        // 跳过空行和注释
        if (trimmedLine === '' || trimmedLine.startsWith('//') || trimmedLine.startsWith('/*')) {
          return
        }

        // 检查语法错误
        if (trimmedLine.includes('printf(') && !trimmedLine.includes('"') && !trimmedLine.includes(');')) {
          errors.push({
            line: lineNumber,
            message: 'printf 函数调用格式错误',
            severity: monaco.MarkerSeverity.Error
          })
        }

        if (trimmedLine.includes('scanf(') && !trimmedLine.includes('&') && !trimmedLine.includes(');')) {
          errors.push({
            line: lineNumber,
            message: 'scanf 需要变量地址 (&)',
            severity: monaco.MarkerSeverity.Error
          })
        }

        // 检查缺少分号
        if (trimmedLine !== '' &&
            !trimmedLine.startsWith('#') &&
            !trimmedLine.endsWith('{') &&
            !trimmedLine.endsWith('}') &&
            !trimmedLine.endsWith(';') &&
            !trimmedLine.includes(' if ') &&
            !trimmedLine.includes(' for ') &&
            !trimmedLine.includes(' while ') &&
            !trimmedLine.includes(' switch ') &&
            !trimmedLine.includes(' struct ') &&
            !trimmedLine.includes(' enum ') &&
            !trimmedLine.includes(' union ') &&
            !trimmedLine.includes(' typedef ') &&
            !/^[a-zA-Z_]\w*:\s*$/.test(trimmedLine)) {
          const commentIndex = trimmedLine.indexOf('//')
          if (commentIndex === -1 || (commentIndex > 0 && !isInString(trimmedLine, commentIndex))) {
            errors.push({
              line: lineNumber,
              message: '可能缺少分号',
              severity: monaco.MarkerSeverity.Warning
            })
          }
        }
      })

      return errors
    }

    // 更新错误显示
    const updateErrorMarkers = (code) => {
      if (!editor) return

      const model = editor.getModel()
      const errors = simulateCompilation(code)
      
      const markers = errors.map(error => ({
        severity: error.severity,
        startLineNumber: error.line,
        startColumn: 1,
        endLineNumber: error.line,
        endColumn: 100,
        message: error.message
      }))

      monaco.editor.setModelMarkers(model, 'c', markers)

      // 更新错误面板
      if (props.showErrorPanel && errorPanel.value) {
        if (errors.length > 0) {
          const errorHtml = `
            <div class="error-panel">
              <div class="error-header">编译检查 (${errors.length})</div>
              ${errors.map(error => `
                <div class="error-item ${error.severity === monaco.MarkerSeverity.Error ? 'error' : 'warning'}">
                  <span class="error-line">第 ${error.line} 行:</span>
                  <span class="error-message">${error.message}</span>
                </div>
              `).join('')}
            </div>
          `
          errorPanel.value.innerHTML = errorHtml
        } else {
          errorPanel.value.innerHTML = `
            <div class="error-panel success">
              <div class="error-header">代码检查通过</div>
              <div class="error-item">没有发现语法问题</div>
            </div>
          `
        }
      }

      // 发射编译状态
      emit('compile-status', {
        hasErrors: errors.some(e => e.severity === monaco.MarkerSeverity.Error),
        errors,
        code
      })
    }

    const registerCLanguage = () => {
      // 注册C语言
      monaco.languages.register({ id: 'c' })

      // 设置C语言的语法规则
      const symbolsPattern = /[=><!~?:&|+/*^%-]+/
      
      monaco.languages.setMonarchTokensProvider('c', {
        keywords: [
          'auto', 'break', 'case', 'char', 'const', 'continue', 'default', 'do', 'double',
          'else', 'enum', 'extern', 'float', 'for', 'goto', 'if', 'inline', 'int', 'long',
          'register', 'return', 'short', 'signed', 'sizeof', 'static', 'struct', 'switch',
          'typedef', 'union', 'unsigned', 'void', 'volatile', 'while'
        ],
        typeKeywords: ['bool', 'true', 'false'],
        operators: [
          '=', '>', '<', '!', '~', '?', ':', '==', '<=', '>=', '!=',
          '&&', '||', '++', '--', '+', '-', '*', '/', '&', '|', '^', '%', '<<', '>>'
        ],
        symbols: symbolsPattern,
        tokenizer: {
          root: [
            [/\/\//, 'comment'],
            [/\/\*/, 'comment', '@comment'],
            [/#\s*\w+/, 'preprocessor'],
            [
              /[a-zA-Z_]\w*/,
              {
                cases: {
                  '@keywords': 'keyword',
                  '@typeKeywords': 'type',
                  '@default': 'identifier'
                }
              }
            ],
            [/\d*\.\d+([eE][-+]?\d+)?[fF]?/, 'number.float'],
            [/\d+/, 'number'],
            [/"([^"\\]|\\.)*$/, 'string.invalid'],
            [/"/, 'string', '@string_double'],
            [/'([^'\\]|\\.)*$/, 'string.invalid'],
            [/'/, 'string', '@string_single'],
            [
              /@symbols/,
              {
                cases: {
                  '@operators': 'operator',
                  '@default': ''
                }
              }
            ]
          ],
          comment: [
            [/\*\//, 'comment', '@pop'],
            [/./, 'comment']
          ],
          string_double: [
            [/\\[tnfr"'\\]/, 'string.escape'],
            [/"/, 'string', '@pop'],
            [/./, 'string']
          ],
          string_single: [
            [/\\[tnfr"'\\]/, 'string.escape'],
            [/'/, 'string', '@pop'],
            [/./, 'string']
          ]
        }
      })

      // 注册智能代码补全
      monaco.languages.registerCompletionItemProvider('c', {
        provideCompletionItems: (model, position) => {
          const wordInfo = model.getWordUntilPosition(position)
          const range = {
            startLineNumber: position.lineNumber,
            startColumn: wordInfo.startColumn,
            endLineNumber: position.lineNumber,
            endColumn: wordInfo.endColumn
          }

          const word = wordInfo.word.toLowerCase()

          const suggestions = []

          // 基础关键字补全
          const filteredKeywords = cKeywords.filter(keyword => 
            keyword.label.toLowerCase().includes(word)
          ).map(keyword => ({
            ...keyword,
            range,
            sortText: `1${keyword.label}`
          }))

          suggestions.push(...filteredKeywords)

          // 智能补全：根据输入内容提供相关代码片段
          // printf相关补全
          if (word.includes('p') || word.includes('r') || word.includes('i') || 
              word.startsWith('pri') || word.startsWith('print')) {
            console.log('Showing printf snippets')
            const printfSnippets = codeSnippets.printf.map(snippet => ({
              label: snippet.label,
              kind: snippet.kind,
              documentation: snippet.documentation,
              detail: snippet.detail,
              insertText: snippet.insertText,
              insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
              range,
              sortText: `0${snippet.label}`
            }))
            suggestions.push(...printfSnippets)
          }

          // scanf相关补全
          if (word.includes('s') || word.includes('c') || word.includes('a') || 
              word.startsWith('sca') || word.startsWith('scan')) {
            const scanfSnippets = codeSnippets.scanf.map(snippet => ({
              ...snippet,
              insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
              range,
              sortText: `0${snippet.label}`
            }))
            suggestions.push(...scanfSnippets)
          }

          // include相关补全 - 简化条件，不使用 lineUntilCursor
          if (word.includes('i') || word.includes('n') || word.includes('c') || 
              word.includes('l') || word.startsWith('incl')) {
            const includeSnippets = codeSnippets.include.map(snippet => ({
              ...snippet,
              insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
              range,
              sortText: `0${snippet.label}`
            }))
            suggestions.push(...includeSnippets)
          }

          // main函数补全
          if (word.includes('m') || word.includes('a') || word.includes('i') || 
              word.includes('n') || word.startsWith('main')) {
            const mainSnippet = {
              label: 'main',
              kind: monaco.languages.CompletionItemKind.Snippet,
              documentation: '主函数模板',
              detail: '主函数',
              insertText: 'int main() {\n\t${1:// code}\n\treturn 0;\n}',
              insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
              range,
              sortText: '0main'
            }
            suggestions.push(mainSnippet)
          }

          // 控制结构补全
          if (word.includes('i') || word.includes('f') || word.startsWith('if') || 
              word.includes('f') || word.includes('o') || word.includes('r') || 
              word.startsWith('for') || word.includes('w') || word.includes('h') || 
              word.includes('i') || word.includes('l') || word.includes('e') || 
              word.startsWith('while') || word.includes('s') || word.includes('w') || 
              word.includes('i') || word.includes('t') || word.includes('c') || 
              word.includes('h') || word.startsWith('switch')) {
            const controlSnippets = codeSnippets.control.map(snippet => ({
              ...snippet,
              insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
              range,
              sortText: `2${snippet.label}`
            }))
            suggestions.push(...controlSnippets)
          }

          // 结构体补全
          if (word.includes('s') || word.includes('t') || word.includes('r') || 
              word.includes('u') || word.includes('c') || word.includes('t') || 
              word.startsWith('struct')) {
            const structSnippets = codeSnippets.struct.map(snippet => ({
              ...snippet,
              insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
              range,
              sortText: `2${snippet.label}`
            }))
            suggestions.push(...structSnippets)
          }

          // 函数补全
          if (word.includes('f') || word.includes('u') || word.includes('n') || 
              word.includes('c') || word.includes('t') || word.includes('i') || 
              word.includes('o') || word.includes('n') || word.startsWith('function')) {
            const functionSnippets = codeSnippets.function.map(snippet => ({
              ...snippet,
              insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
              range,
              sortText: `2${snippet.label}`
            }))
            suggestions.push(...functionSnippets)
          }

          // 变量声明补全
          if (word.includes('i') || word.includes('n') || word.includes('t') || 
              word.startsWith('int') || word.includes('f') || word.includes('l') || 
              word.includes('o') || word.includes('a') || word.includes('t') || 
              word.startsWith('float') || word.includes('c') || word.includes('h') || 
              word.includes('a') || word.includes('r') || word.startsWith('char')) {
            const variableSnippets = codeSnippets.variables.map(snippet => ({
              ...snippet,
              insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
              range,
              sortText: `3${snippet.label}`
            }))
            suggestions.push(...variableSnippets)
          }

          // 去重
          const uniqueSuggestions = []
          const seenLabels = new Set()
          
          suggestions.forEach(suggestion => {
            if (!seenLabels.has(suggestion.label)) {
              seenLabels.add(suggestion.label)
              uniqueSuggestions.push(suggestion)
            }
          })

          return {
            suggestions: uniqueSuggestions,
            incomplete: false
          }
        },

        triggerCharacters: [' ', '.', '#', '(', '"', '<', 'p', 'r', 'i', 's', 'c', 'a', 'f'],
        triggerKind: monaco.languages.CompletionTriggerKind.TriggerForIncompleteCompletions
      })
    }

    onMounted(() => {
      registerCLanguage()
      
      // 创建编辑器
      editor = monaco.editor.create(editorContainer.value, {
        value: props.codeTemplate,
        language: 'c',
        theme: 'vs',
        minimap: { enabled: false },
        scrollBeyondLastLine: false,
        automaticLayout: true,
        lineNumbers: 'on',
        folding: true,
        fontSize: fontSize.value,
        fontFamily: 'Consolas, "Courier New", monospace',
        tabSize: 2,
        
        // 补全配置
        suggestOnTriggerCharacters: true,
        quickSuggestions: {
          other: true,
          comments: true,
          strings: true
        },
        quickSuggestionsDelay: 100,
        snippetSuggestions: 'top',
        
        // 增强补全体验
        wordBasedSuggestions: true,
        suggest: {
          showIcons: true,
          showStatusBar: true,
          preview: true,
          showMethods: true,
          showFunctions: true,
          showConstructors: true,
          showFields: true,
          showVariables: true,
          showClasses: true,
          showStructs: true,
          showInterfaces: true,
          showModules: true,
          showProperties: true,
          showEvents: true,
          showOperators: true,
          showUnits: true,
          showValues: true,
          showConstants: true,
          showEnums: true,
          showEnumMembers: true,
          showKeywords: true,
          showWords: true,
          showColors: true,
          showFiles: true,
          showReferences: true,
          showFolders: true,
          showTypeParameters: true,
          showSnippets: true
        }
      })

      // 监听代码变化
      editor.onDidChangeModelContent(() => {
        const code = editor.getValue()
        emit('code-change', code)
        
        // 防抖编译检查
        clearTimeout(window.compileTimeout)
        window.compileTimeout = setTimeout(() => {
          updateErrorMarkers(code)
        }, 1000)
      })

      // 添加快捷键
      // Ctrl+1 插入基础结构模板
      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Digit1, () => {
        const selection = editor.getSelection()
        editor.executeEdits('', [{
          range: selection,
          text: codeTemplates.basicStructure
        }])
      })

      // 初始发射一次代码和编译状态
      const initialCode = editor.getValue()
      emit('code-change', initialCode)
      updateErrorMarkers(initialCode)
    })

    onBeforeUnmount(() => {
      if (editor) {
        editor.dispose()
      }
      // 清理事件监听器
      document.removeEventListener('mousemove', handleResize)
      document.removeEventListener('mouseup', stopResize)
    })

    // 公共方法：编译代码
    const compileCode = () => {
      if (editor) {
        const code = editor.getValue()
        updateErrorMarkers(code)
        emit('compile-request', code)
      }
    }

    // 公共方法：设置代码
    const setCode = (code) => {
      if (editor) {
        editor.setValue(code)
      }
    }

    // 公共方法：获取代码
    const getCode = () => {
      return editor ? editor.getValue() : ''
    }

    // 公共方法：加载模板
    const loadTemplate = (templateName) => {
      if (editor && codeTemplates[templateName]) {
        editor.setValue(codeTemplates[templateName])
      }
    }

    // 公共方法：设置字体大小
    const setFontSize = (size) => {
      fontSize.value = size
      handleFontSizeChange(size)
    }

    // 公共方法：设置编辑器高度
    const setEditorHeight = (height) => {
      editorHeight.value = Math.max(props.minHeight, Math.min(props.maxHeight, height))
    }

    return {
      editorContainer,
      errorPanel,
      fontSize,
      fontSizeOptions,
      editorHeight,
      handleFontSizeChange,
      startResize,
      compileCode,
      setCode,
      getCode,
      loadTemplate,
      setFontSize,
      setEditorHeight
    }
  },

  emits: ['code-change', 'compile-status', 'compile-request', 'height-change']
}
</script>

<style scoped>
.code-editor-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: white;
  overflow: hidden;
}

.editor-toolbar {
  padding: 8px 12px;
  background: #f0f9ff;
  border-bottom: 1px solid #e1f5fe;
  font-size: 12px;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.font-size-control {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.editor-toolbar code {
  background: #e3f2fd;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: #1976d2;
  font-weight: bold;
}

.editor-resizable-container {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: height 0.1s ease;
}

.editor-container {
  flex: 1;
  min-height: 0; /* 确保flex布局正确 */
}

.resize-handle {
  height: 8px;
  background: #f5f7fa;
  border-top: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.2s ease;
}

.resize-handle:hover {
  background: #ebeef5;
}

.handle-line {
  width: 40px;
  height: 2px;
  background: #c0c4cc;
  border-radius: 1px;
}

.resize-handle:hover .handle-line {
  background: #909399;
}

.error-panel-container {
  border-top: 1px solid #e8e8e8;
  max-height: 150px;
  overflow-y: auto;
  background: #f8f9fa;
}

/* 拖拽时的样式 */
.editor-resizable-container.resizing {
  user-select: none;
  -webkit-user-select: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .editor-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .toolbar-right {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>

<style>
/* 全局错误面板样式 */
.error-panel {
  padding: 8px 12px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
}

.error-header {
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e8e8e8;
}

.error-item {
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
}

.error-item.error {
  color: #f56c6c;
}

.error-item.warning {
  color: #e6a23c;
}

.error-panel.success {
  color: #67c23a;
}

.error-line {
  font-weight: bold;
  margin-right: 8px;
  min-width: 80px;
}

.error-message {
  flex: 1;
}
</style>